import "./index.css";
const content = "我是一段文本";
// react 插值表达式 -> {}
// react 条件渲染 -> 支持三元表达式、运算符
const sex = "boy";
const isLoading = true;
const color = "red";
// red => 红灯
// green => 绿灯
// yellow => 黄灯
const txt = (color) => {
    switch (color) {
        case "red":
            return <p>红灯标签</p>;
        case "green":
            return "绿灯";
        case "yellow":
            return "黄灯";
        default:
            return "绿灯";
    }
};
const element = (
    <div>
        {content}
        {/* v-if & v-else */}
        {/* <p>{sex === "girl" ? "女孩" : "男孩"}</p> */}
        {/* v-if */}
        {sex === "girl" ? <p>女孩</p> : null}
        {/* 碰到多个判断条件可以用函数调用的形式 */}
        <div className="red">{txt(color)}</div>
        <div>{isLoading && <div>loading....</div>}</div>
        {/* ?? 判断变量是否为null或者undefined -> false */}
        <div>{null ?? <div>??</div>}</div>
        <div>{10 * 10}</div>
    </div>
);
export default element; // jsx
